マウス2

***　マウス２　***

では　次は何を書きましょうか…。
そうだ…　よく、リンクに触れるとズレる文字がありますよね？
あれを説明していきま～す♪　(^ー^* )フフ

*-*-* リンクに触れるとズレるタグ*-*-*-

↓ココで使うタグはコレ

<a href="http://～" style="color:▲;font-size:★1;text-decoration:none;"
onMouseOver=style.fontSize="☆" onMouseOut=style.fontSize="★2" target="_blank">
ここに文字
</a>

▲…表示させる文字の色 ★1…マウスを重ねない時の文字の大きさ（初期状態） ☆…マウスを重ねた時の文字の大きさ ★2…マウスを重ねない時の文字の大きさ（重ねた後）
http://～	リンク先のURL
text-decoration:none	下線の有無（ナシ）
target="_blank"	新しいウィンドウで開く

★１と★２に同じ大きさを入れて見てみましょう。
初期状態は「14」・マウスを重ねると「15」・一度重ねた後は「14」に戻し、
表示させる文字の色（▲）は『#3366ff』にしてみます。

ここに文字

ズレる幅は、あまり大きな差がない方がいいかと思います｡｡｡(^-^)

*-*-*文字に触れるとズレるタグ*-*-*

では、次に　リンク『a』ではなく　『font』に変えてみますね｡｡｡
ここで使うタグはコレ↓

<font style="color:▲;font-size:★1;"
onMouseOver=style.fontSize="☆" onMouseOut=style.fontSize="★2">
ここに文字
</a>

▲	表示させる文字の色
★1	始めに表示させる文字の大きさ
☆	マウスを重ねた時の文字の大きさ
★2	マウスを外した時の文字の大きさ

リンクの<a>を<font>に変えただけですが、
リンク先を指定する『http://～』と下線を取る『text-decoration:none』、
別ウィンドウで開く指定の『target="_blank"』を取っているのがわかりますか？
これを見てみると…

ここに文字

…このようになります。
ココでは、マウスが重なっていない時の大きさを『14』（★１・２）
マウスが重なった時の大きさを『15』にしています。

*-*-*リンク（文字）に触れるとズレるタグ（背景色付き）*-*-*

ではでは　これまでのタグに、背景色を付けてみましょう。

↓リンクで使うタグはコレ

<a href="http://～" style="background-color:●;color:▲;font-size:★１;text-decoration:none;"
onMouseOver=style.fontSize="☆" onMouseOut=style.fontSize="★２" target="_blank">
ここに文字
</a>

↓文字で使うタグはコレ

<font style="background-color:●;color:▲;font-size:★1;"
onMouseOver=style.fontSize="☆" onMouseOut=style.fontSize="★2">
ここに文字
</a>

どちらも『style』の中に『background-color:●』を入れています。
では●の中に白（#FFFFFF）を入れて見てみると…

TAMA’S HOME

ここに文字

このように、タグを追加する時には、セミコロン『；』で繋いでいるので、
気を付けて下さいネ☆彡　(=^▽^=)ノ゛

***OMAKE***

これに以前紹介した、マウスカーソルの変更を付け加える事も出来ます。
上記と同じように『style』の中に『cursor:◎』を入れ、セミコロン『；』で繋ぎます。
カーソルの種類は『リンク色々２』を見てね♪

<a href="http://～" style="cursor:crosshair;background-color:●;color:▲;font-size:★1;text-decoration:none;"
onMouseOver=style.fontSize="☆" onMouseOut=style.fontSize="★2" target="_blank">
ここに文字
</a>

TAMA’S HOME

お昼にします｡｡｡　ヾ(*＾▽゜）